<template>
	<view class="people">
		
	   <view class="">
	   <u-notice-bar bgColor="#ecf5ff" color="#3c9cff" :text="text1"></u-notice-bar>
	   </view>
	   <u-navbar
	             title="电子健康卡"
	             :autoBack="true"
	         >
	         </u-navbar>
			 <u-popup :show="showw" customStyle="width:700rpx;" :round="10" mode="center" width="80%" :closeable="true" @close="closee" height="" border-radius="10">
			 	<view class="pop">
			 		<!-- <view class="poptop">
			 			<u-navbar :custom-back="cancell" :is-back="true" :title-bold="true" title="健康卡授权"></u-navbar>
			 		</view> -->
			 		<view class="cardimg">
			 			<image src="../../../static/icons/cardicon.png" mode=""></image>
			 		</view>
			 		<view class="hosname">
			 			河南预约挂号平台
			 		</view>
			 		<view class="" v-if="showpp">
			 			<health-card-login encrypt="true" authLogin="false" @authFail="authFail" @authSucess="authSuccess" :authCancel="authCancel"
			 			 wechatcode="true">
			 				<view class="foott">
			 					<view @click="hideComponentLogin()" class="agree">一键登录授权</view>
			 				</view>
			 				<view class="shuomingg">
			 					登录代表同意<span @click="goxieyi()">《用户服务协议与隐私政策》</span>并授权使用您的账号信息以便您统一管理
			 				</view>
			 			</health-card-login>
			 		</view>
			 	</view>
			 </u-popup>
<view class="cardlist">
	<div class="list-item" @click="goinfo(userinfo)" v-if="userinfo.ishealthcard==false">
	 <image src="../../../static/icons/card.png" mode=""></image>
	 <view class="username" style="display: flex;">
	 	{{userinfo.name?userinfo.name:""}}  <view class="ben" style="  margin-left: 15rpx; margin-top: 10rpx; width: 80rpx;height: 40rpx;text-align: center;line-height: 40rpx;font-size: 24rpx;color: #888;background-color: #f4f6fc;border-radius: 10rpx;">
	 		本人
	 	</view>
	 </view>
	 <view class="usercardid">
	 	{{userinfo.cardno?userinfo.cardno:""}}
	 </view>
	 <view class="userimg">
	 	<image :src="'data:image/jpg;base64,' + userinfo.QrCode" mode=""></image>
	 </view>
	  </div>  
	<div class="list-item" style='' v-if="userinfo.ishealthcard==true">
	  <image src="../../../static/icons/bgcard.png" mode=""></image>
	 
	<view class="username" style="display: flex;">
		{{userinfo.name?userinfo.name:""}}  <view class="ben" style="  margin-left: 15rpx; margin-top: 10rpx; width: 80rpx;height: 40rpx;text-align: center;line-height: 40rpx;font-size: 24rpx;color: #888;background-color: #f4f6fc;border-radius: 10rpx;">
			本人
		</view>
	</view>
	 <view class="usercardid">
	 {{userinfo.cardno?userinfo.cardno:""}}
	 </view>
 <view class="btnsheng" @click="shengji(userinfo,1)">
		 	立即升级
		 </view>
	  </div>  
  <div class="list-item" @click="goinfoo(item)" v-for="(item, index) in childuserinfo" :key="index" v-if="item.ishealthcard==false">  
	   <image src="../../../static/icons/card.png" mode=""></image>
	   <view class="username">
	   	{{item.name?item.name:""}}
	   </view>
	   <view class="usercardid">
	   	{{item.cardno?item.cardno:""}}
	   </view>
	   <view class="userimg">
	   	<image :src="'data:image/jpg;base64,' + item.QrCode" mode=""></image>
	   </view>
	    </div>  
		  <div class="list-item"  v-for="(item, index) in childuserinfo" :key="index" style='' v-if="item.ishealthcard==true">
		  	  <image src="../../../static/icons/bgcard.png" mode=""></image>
		  	 
		  	<view class="username" >
		  			{{item.name?item.name:""}}  
		  	</view>
		  	 <view class="usercardid">
		  		{{item.cardno?item.cardno:""}}
		  	 </view>
		  <view class="btnsheng" @click="shengji(item,2)">
		  		 	立即升级
		  		 </view>
		  	  </div>  
	
</view>
		<view class="add" @click="goaddpep()" v-if="childuserinfo.length<9">
			<view class="addicon"><u-icon name="plus-circle" color="#3c9cff" size="40"></u-icon></view>
			   <view class="addtit">
			   	添加健康卡
			   </view>
		</view>
		<view class="bang" @click="gobindcard()">
			一键授权，已有健康卡用户直接绑定>
		</view>
	<!-- 	<view class="" style="font-size: 30rpx;font-weight: blod;line-height: 80rpx;text-align: center;">
			{{wechatCode}}
		</view> -->
			<u-modal :show="show" title="温馨提示" @close="close()" :closeOnClickOverlay="true" content='您确定要删除该就诊人吗？' @cancel="cancel()" :showCancelButton="true" @confirm="delpepcon()"></u-modal>
			<u-modal :show="showdel" title="温馨提示" @close="closeee()" :closeOnClickOverlay="true" content='身份信息不匹配，您可解除当前信息绑定，重新授权添加.' @cancel="cancelll()" :showCancelButton="true" @confirm="delshengji()" confirmText="解除"></u-modal>
	
	</view>
</template>

<script>
	import homeApi from '@/api/home'
	import urlApi from "@/setting.js"
	import homeApii from '@/api/homee'
	import { reportCmPV } from '../../../api/cloudMonitorHelper.js';
	export default {
		data() {
			return {
				 list: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10']  ,
				showpp: false,
				showw:false,
				  text1: '',
				  userinfo:"",
				  token:"",
				  childuserinfo:"",
				  show:false,
				  childid:"",
				  num:"9",
				  wechatCode:"",
				  shengtype:"",
				  shenginfo:"",
				  shengjitype:"",
				  showdel:false
			
			}
		},
	
		onLoad(option) {
			let healthCode=option.healthCode
			console.log(healthCode,"绑了")
			uni.removeStorageSync("wechatCode")
			uni.removeStorageSync("healthCode")
			// reportCmPV({ title: '查询家庭成员', option });
			// my.hideShareMenu({
			//   success(res) {
			//     console.log('success', res) // {success: true}
			//   },
			//   fail(err) {
			//     console.log('fail', err)
			//   }
			// })

		},
	
		onShow() {
			let token=uni.getStorageSync("token")
						if(token){
							this.token=token
							this.getuserinfo()
						}else{
							this.gettoken()
						}
		},

		methods: {
			goxieyi(){
				uni.navigateTo({
					url:"/pages/xieyi/xieyi"
				})
			},
			delshengji(){
				let token=uni.getStorageSync("token")
				homeApii.delzidang({
					token:token,
					pid:this.shenginfo.userid
				}).then(res=>{
					if(res.code==4000){
						uni.showToast({
							title:"解绑成功",
							icon:"none"
						})
						this.showdel=false
				this.getuserinfo()
				
					}
				})
			},
			cancelll(){
				this.showdel=false
			},
			closeee(){
				this.showdel=false
			},
			shengji(val,index){
				this.wechatCode=""
				this.shenginfo=val
				console.log(this.shenginfo,"升级详情")
				this.shengjitype=index
				if (this.wechatCode) {
				this.shengdiao(this.wechatCode)
				
				console.log(this.wechatCode)
				} else {
					this.loginn()
				}
			},
			gobindcard() {
				uni.navigateTo({
					url:"/pages/mine/bindcardd/bindcardd?type=3"
				})
			},
			hideComponentLogin() {
				this.showw = false
				uni.showLoading()
			},
			login() {
				const plugin = requirePlugin('myPlugin')
				// plugin.login(callback, options)
				plugin.login((isok, res) => {
					console.log('plugin.login: ', isok, res)
					if (res.result.type !== 3) {
						// 用户在微信授权过，可直接获取登录信息，处理后续业务
						this.todo(res)
					} else {
						// 用户未授权，需要用户同意授权
						// 显示 healthCardLogin 登录组件，引导用户同意授权
						this.shengtype="1"
						this.showw = true
						this.showpp = true
					}
				}, {
					wechatcode: true
				})
			},
			loginn() {
				const plugin = requirePlugin('myPlugin')
				// plugin.login(callback, options)
				plugin.login((isok, res) => {
					console.log('plugin.login: ', isok, res)
					if (res.result.type !== 3) {
						// 用户在微信授权过，可直接获取登录信息，处理后续业务
						this.todoo(res)
					} else {
						// 用户未授权，需要用户同意授权
						// 显示 healthCardLogin 登录组件，引导用户同意授权
						this.shengtype="2"
						this.showw = true
						this.showpp = true
					}
				}, {
					wechatcode: true
				})
			},
			authSuccess(data) {
				uni.hideLoading()
				let res = data.detail
				if(this.shengtype=="1"){
					this.todo(res)
				}
				if(this.shengtype=="2"){
					this.todoo(res)
				}
				// 同 plugin.login，用户同意授权，获取登录信息，处理后续业务
			},
			
			// 用户取消授权，授权失败回调
			authCancel() {
				uni.hideLoading()   
			
			},
			goinfo(item){
				let info = {
					QrCode: item.QrCode,
					userid: item.userid,
					name: item.name,
					cardno: item.cardno,
					mobile: item.mobile
				}
				let itam = encodeURIComponent(JSON.stringify(info))
				uni.navigateTo({
					url: "/pages/mine/cardinfo/cardinfo?info=" + itam+"&type=1"
				})
			},
			goinfoo(item){
				let info = {
					QrCode: item.QrCode,
					userid: item.userid,
					name: item.name,
					cardno: item.cardno,
					mobile: item.mobile
				}
				let itam = encodeURIComponent(JSON.stringify(info)) 
				uni.navigateTo({
					url: "/pages/mine/cardinfo/cardinfo?info=" + itam+"&type=2"
				})
			},
			
			// 业务代码（成功获取登录数据）
			todo(res) {
				// 传入参数 wechatcode = true 结果输出 wechatCode ，注意大小写
				// 传入参数 healthcode = true 及健康卡卡号 ecard_no，输出healthCode
				this.wechatCode = res.result.wechatCode 
			console.log(this.wechatCode,"todo里的")
				if (this.wechatCode) {
					uni.navigateTo({
						url: `/pages/mine/addcardd/addcardd?wechatCode=${this.wechatCode}`
					})
				} else {
					this.login()
				}
			 
			},
			shengdiao(val){
				// uni.showLoading({
				// 	title: '加载中',
				// 	mask: true
				// });
				let token=uni.getStorageSync("token")
				homeApii.shengjiapi({
					type:this.shengjitype,
					userid:this.shenginfo.userid,
					wechatCode:val,
					token:token
				}).then(res=>{
					// this.wechatCode=""
					if(res.code==4021){
						this.showdel=true  
					}else if(res.code==4000){
						uni.showToast({
							title:"成功"
						})
						this.getuserinfo()
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
					
					// uni.hideLoading()
				})
			},
			todoo(res) {
				// 传入参数 wechatcode = true 结果输出 wechatCode ，注意大小写
				// 传入参数 healthcode = true 及健康卡卡号 ecard_no，输出healthCode
				this.wechatCode = res.result.wechatCode 
			
				if (this.wechatCode) {
				this.shengdiao(this.wechatCode)
				
				
				
				
				} else {
					this.loginn()
				}
			 
			},
			cancell() {
				this.showw = false
				this.showpp = false
			},
			close(){
				this.show=false
			},
			cancel(){
				this.show=false
			},
			delpep(item){
				this.childid=item.userid
				this.show=true
			},
			delpepcon(){
				uni.showLoading({title: '加载中',mask:true});
				homeApii.delcard({
					token:this.token,
					pid:this.childid
				}).then(res=>{
					uni.hideLoading()
					if(res.code==4000){
						this.show=false
						uni.showToast({
							title:"删除成功",
							icon:"none"
						})
						this.getuserinfo()
					}
				})
			},
			getuserinfo(){
				uni.showLoading({title: '加载中',mask:true});
				homeApii.getuserinfo({
					token:this.token
				}).then(res=>{
					console.log(res)
					uni.hideLoading()
					if(res.code==4000){
						this.userinfo=res.data.userinfo
						this.childuserinfo=res.data.childuserinfo
						if(this.childuserinfo){
							this.num=9-this.childuserinfo.length
							console.log(this.num,"123")
							this.text1="每个账号可以添加10位就诊人，您还可以添加"+this.num+"位"
							this.$forceUpdate();
						}else{
							this.text1="每个账号可以添加5位就诊人，您还可以添加"+"9"+"位"
							this.$forceUpdate();
							// this.text1="每个账号可以添加5位就诊人，您还可以添加"+"9位"
							this.$forceUpdate();
						}
						
					}
					
				})
			},
			gettoken() {
			uni.login({
				provider: 'weixin',
				success: (re) => {
					console.log(re)
					let code = res.code
					// this.getopenid()
					const authCode = res.authCode;
					homeApii.getopenid({
						code: code
					}).then(res => {
						console.log(res)
						if (res.code == 4000) {
							uni.setStorageSync("token", res.data.token)
							this.$store.state.doc.token = res.data.token
							this.token = res.data.token
							resovle()
						}
					})
				},
			})
			},
			closee(){
				this.showw=false
			},
			goaddpep(){
				if (this.wechatCode) {
					console.log(this.wechatCode,"1111")
					uni.navigateTo({
						url: `/pages/mine/addcardd/addcardd?wechatCode=${this.wechatCode}`
					})
				console.log(this.wechatCode)
				} else {
					this.login()
				}
				// uni.navigateTo({
				// 	url:"/pages/mine/addcard/addcard?userid="+this.userinfo.userid
				// })
			}



		}
	}
</script>
<style>
	.u-modal__content{
		text-align: center;
	}

</style>
<style scoped lang="scss">
	.people {
	background-color: #F5F6F8;
	// padding-bottom: 100rpx;
	height: 100vh;
	overflow: hidden;
	padding-top: 180rpx;
	.pop {
		width: 90%;
		margin: 0 auto;
		overflow: hidden;
		margin-top: 150rpx;
		padding-bottom: 30rpx;
	
		.poptop {
			width: 100%;
		}
	
		.cardimg {
			width: 150rpx;
			height: 150rpx;
			margin: 0 auto;
			margin-top: 10rpx;
	
			image {
				width: 100%;
				height: 100%;
			}
		}
	
		.hosname {
			width: 95%;
			margin: 0 auto;
			text-align: center;
			font-size: 50rpx;
			font-weight: bold;
			margin-top: 80rpx;
		}
	
	
	
		.title {
			width: 100%;
			text-align: center;
			margin-top: 18rpx;
			font-size: 32rpx;
			color: #333;
			font-weight: 550;
		}
	
		.info {
			width: 80%;
			margin: 0 auto;
			margin-top: 10rpx;
			font-size: 28rpx;
		}
	
		.shuomingg {
			width: 95%;
			margin: 0 auto;
			font-size: 28rpx;
			color: #999;
			line-height: 40rpx;
			margin-top: 80rpx;
	
			span {
				color: orange;
			}
	
		}
	
		.foott {
			width: 80%;
			margin: 0 auto;
			display: flex;
			// margin-top: 20rpx;
			justify-content: space-between;
	
	
	
			.agree {
				width: 80%;
				height: 90rpx;
				margin: 0 auto;
				font-size: 34rpx;
				color: #fff;
				border-radius: 90rpx;
				line-height: 90rpx;
				text-align: center;
				background-color: #3669F8;
				margin-top: 100rpx;
			}
		}
	}
	
	
.popma{
	width: 600rpx;
	height: 600rpx;
	font-weight: bold;
	text-align: center;
	padding-top: 50rpx;
	font-size: 30rpx;
	line-height: 50rpx;
	image{
		width: 400rpx;
		height: 400rpx;
	}
}
		.add{
			width: 90%;
			height: 380rpx;
			border: 1rpx dashed #ccc;
			border-radius: 10rpx;
			text-align: center;
			margin:0 auto;
			margin-top: 50rpx;
			.addicon{
				width: 60rpx;
				height: 60rpx;
				margin: 0 auto;
				margin-top: 130rpx;
			}
			.addtit{
				width: 100%;
				text-align: center;
				line-height: 50rpx;
				margin-top: 25rpx;
				font-size: 28rpx;
				color:#333;
			}
		}
		.bang{
			width:100%;
			text-align:center;
			color:#3c9cff;
			font-size: 24rpx;
			margin-top:30rpx;
		}
.cardlist{
	 display: flex;  
	  overflow-x: auto;  
	  flex-direction: row;  
	  padding: 10px;  
	  .list-item {  
	    flex: 0 0 auto;  
	    width: 675rpx;  
		margin-left: 20rpx;
		height: 380rpx;
	    text-align: center;  
	    // border: 1rpx solid #ccc;  
	    border-radius: 10rpx;  
		position: relative;
		
		image {
			width: 100%;
			height: 100%;
		}
		
		.username {
			position: absolute;
			bottom: 100rpx;
			left: 40rpx;
			font-size: 40rpx;
			font-weight: 600;
			color: #000;
		}
		.laoimg{
			position: absolute;
			top: 60rpx;
			left: 60rpx;
			width: 140rpx;
			height: 140rpx;
			image{
				width: 100%;
				height: 100%; 
			}
		}
		
		.usercardid {
			position: absolute;
			bottom: 60rpx;
			left: 40rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #000;
		}
		.btnsheng{
			position: absolute;
			width: 180rpx;
			height: 68rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			color: #FFFFFF;
			line-height: 68rpx;
			border: 1rpx solid #FFFFFF;
			top: 50rpx;
			right: 60rpx;
		}
		
		.userimg {
			position: absolute;
			bottom: 60rpx;
			right: 40rpx;
			width: 200rpx;
			height: 200rpx;
		
			image {
				width: 100%;
				height: 100%;
			}
		}
	  }

}
		.foot {
		width: 93%;
		margin: 0 auto;
		margin-top: 80rpx;
		border-radius: 15rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		background-color: #4581f7;
		color: #fff;
		text-align: center;
		}

	}
</style>
